<template>
    <div class="main" v-if="visible" ref="mainModel">
        <div class="button-box">
            <img class="fr pointer" src="@/assets/icon/uploadList/close_icon.png" @click="closeModel">
            <img class="fr pointer" :class="modelType ? 'drop-up' : 'drop-down'"
                 src="@/assets/icon/uploadList/down_icon.png.png" @click="downModel">
        </div>
        <div class="title-box" v-if="isLoadingOver">
            <img class="fl" src="@/assets/icon/uploadList/upload_over.png">
            <div class="content-box fl">
                <p class="upload-over">上传完成</p>
            </div>
        </div>

        <div class="title-box" v-if="!isLoadingOver">
            <img class="fl" src="@/assets/icon/uploadList/loading_icon.png">
            <div class="content-box fl">
                <p class="content-file" v-text="loadingContent + '个文件上传中'"></p>
                <p class="speed" v-text="formatSize(allLoadingSpeed) + '/s'"></p>
            </div>
        </div>
        <div v-show="modelType">
            <div class="up-level">
                <p class="text">升级套餐享受超大容量 <span class="button pointer" @click="goToprice">升级套餐</span></p>
            </div>
            <ul class="list-main">
                <li class="list" v-for="item in updateList" :key="item.id">
                    <!-- <div class="icon__ext"></div> -->
                    <check-icon class="icon-box fl" :fileData="item"></check-icon>
                    <div class="name-box fl">
                        <p class="file-name" v-text="item.name"></p>
                        <p class="file-size" v-text="formatSize(item.size)"></p>
                    </div>
                    <div class="file-sepeed text-center fl">
                        <span class="content" v-if="item.status==3">上传完成</span>
                        <span class="content" v-if="(item.speed || item.speed === 0) && item.percent && item.status!==3"
                              v-text="formatSize(item.speed) + '/S'"></span>
                        <span class="content" v-if="!item.percent">校验中...</span>
                        <span class="content" v-if="item.status==4">极速秒传</span>

                    </div>
                    <i-circle v-if="item.status < 2" class="fl percent" :percent=" item.percent * 100" :size="32">
                        <img v-show="item.status === 1" class="stop-button pointer"
                             src="@/assets/icon/uploadList/stop_icon.png" @click="stopUpload(item)">
                        <img v-show="item.status === 0" class="stop-button pointer"
                             src="@/assets/icon/uploadList/start_icon.png" @click="restartUpload(item)">
                    </i-circle>
                    <div class="button-box fr">
                        <img class="fr pointer" src="@/assets/icon/uploadList/close_icon.png"
                             @click="cencelUpload(item)">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
  import CheckIcon from '@/components/CheckIcon.vue'

  export default {
    name: 'PageUploadList',
    components: {
      CheckIcon
    },
    filters: {
      FormatName(value) {
        if (!value) return;
        let idx = value.lastIndexOf('/');
        return (idx > -1
          ? value.substring(idx + 1) : value);
      }
    },

    props: {
      list: {
        type: Array,
        default: function () {
          return []
        }
      },
      cencelUpload: {
        type: Function,
        default: function () {
        }
      },
      restartUpload: {
        type: Function,
        default: function () {
        }
      },
      count: {
        type: Number,
        default: 0
      },
      stopUpload: {
        type: Function,
        default: function () {
        }
      }
    },

    data() {
      return {
        modelType: true,
        height: 340,
        updateList: [],
        visible: false,
        uploadContent: 1,
        speed: '125Kb'
      };
    },

    computed: {
      isLoadingOver() {
        let isLoadingOver = true
        this.updateList.forEach(function (item) {
          if (item.status !== 3 && item.status !== 4) {
            isLoadingOver = false
          }
        })
        return isLoadingOver;
      },
      loadingContent() {
        return this.updateList.filter(i => i.status === 1).length
      },
      allLoadingSpeed() {
        let speed = 0
        const uploadingList = this.updateList.filter(i => i.status === 1)
        uploadingList.forEach(function (item) {
          speed = speed + item.speed
        })
        return speed
      }

    },

    watch: {
      list: {
        deep: true,
        handler: function (value) {
          if (!this.visible && value.length !== 0) {
            this.visible = true;
          }
          this.updateList = value;
        }
      }
    },

    methods: {
      goToprice: function () {
        window.location.href = 'https://pan.ddbes.com/price.html'
      },
      closeModel: function () {
        this.visible = false
        this.$emit('pageUploadList')
      },
      downModel: function () {
        if (this.modelType) {
          this.modelType = false
        } else {
          this.modelType = true
        }
      },

      formatSize: function (size) {
        let i;
        let unit = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
        for (i = 0; i < unit.length && size >= 1024; i++) {
          size /= 1024;
        }
        return (Math.round(size * 100) / 100 || 0) + unit[i];
      },

      cancelTask: function (item) {
        this.$emit('cancel-task', item);
      },

      handleSmall: function () {
        this.height = this.height === 40 ? 340 : 40;
      },

      handleClick: function () {
        this.$emit('on-closed');
        this.visible = false;
        this.updateList = [];
      }
    }
  };
</script>

<style scoped>
    .main {
        width: 540px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        position: fixed;
        bottom: 0;
        right: 0;
        z-index: 900;
    }

    .button-box {

    }

    .button-box img {
        height: 16px;
        width: 16px;
        margin-top: 12px;
        margin-right: 18px;
    }

    .title-box {
        height: 120px;
    }

    .title-box img {
        margin: 30px 21px 0 33px;
        height: 64px;
        width: 64px;
    }

    .title-box .content-box {
        margin-top: 37px;
    }

    .title-box .content-box .upload-over {
        font-size: 30px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 46px;
    }

    .title-box .content-box .content-file {
        height: 13px;
        font-size: 12px;
        font-weight: 300;
        color: rgba(153, 153, 153, 1);
    }

    .title-box .content-box .speed {
        height: 28px;
        margin-top: 5px;
        font-size: 30px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
    }

    .up-level {
        height: 39px;
        background: rgba(255, 238, 238, 1);
        opacity: 0.97;
    }

    .up-level .text {
        font-size: 12px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-left: 28px;
        line-height: 39px;
    }

    .up-level .button {
        color: rgba(255, 86, 86, 1);
        margin-left: 19px;
    }

    .list-main {
        max-height: 280px;
        overflow: auto;
    }

    .list-main .list {
        height: 68px;
        border-bottom: solid 1px rgba(229, 229, 229, 1);
    }

    .list-main .list .icon-box {
        transform: scale(1.4);
        float: left;
        margin-top: 20px;
        margin-left: 30px;
        margin-right: 17px;

    }

    .list-main .list .name-box {
        height: 68px;
        width: 230px;
        padding-top: 19px;
    }

    .list-main .list .name-box .file-name {
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

    }

    .list-main .list .name-box .file-size {
        font-size: 12px;
        font-weight: 400;
        margin-top: 5px;
        color: rgba(153, 153, 153, 1);
    }

    .list-main .list .stop-button {
        width: 20px;
        height: 20px;
    }


    .list-main .list .file-sepeed {
        height: 68px;
        width: 120px;
        line-height: 68px;
    }

    .list-main .list .percent {
        margin-top: 18px;
    }

    .list-main .list .button-box img {
        height: 20px;
        width: 20px;
        margin-top: 20px;
    }

    .list-main .list .file-sepeed .content {
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .drop-down {
        transform: rotate(180deg);
        transition: all .2s;
    }

    .drop-up {
        transform: rotate(0deg);
        transition: all .2s;
    }
</style>

